<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-02-11 22:44:32
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-02-13 22:22:57
 * @FilePath: /hei_picture_web/src/page/space/_info/modal/MemberModal.vue
 * @Description: 成员邀请
-->
<template>
  <a-modal
    class="member-modal"
    v-model:open="visible"
    title="编辑图片"
    :footer="false"
    @cancel="closeModal"
  >
    <a-card class="member-card">
      <a-typography-paragraph type="secondary">团队空间{{ props.spaceId }}</a-typography-paragraph>
      <a-form layout="vertical" :model="spaceFrom" @finish="handleFinish">
        <a-form-item label="成员id" name="userId">
          <a-input v-model:value="spaceFrom.userId" />
        </a-form-item>
        <a-form-item label="成员名称" name="spaceRole">
          <a-select v-model:value="spaceFrom.spaceRole" :options="SPACE_ROLE_OPTIONS" />
        </a-form-item>
        <a-button style="width: 100%" type="primary" @click="handleFinish">提交</a-button>
      </a-form>
    </a-card>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { addSpaceUserUsingPost } from '@/api/spaceUserController'
import { message } from 'ant-design-vue'
import { SPACE_ROLE_ENUM, SPACE_ROLE_OPTIONS } from '@/constants/spaceEnum'

interface Props {
  spaceId: string
  onSuccess?: (newPicture: API.PictureVO) => void
}

const props = defineProps<Props>()

const spaceFrom = ref<API.SpaceUserAddRequest>({
  spaceId: props.spaceId,
  spaceRole: SPACE_ROLE_ENUM.VIEWER,
})

// 是否可见
const visible = ref(false)

// 打开弹窗
const openModal = () => {
  visible.value = true
}

// 关闭弹窗
const closeModal = () => {
  visible.value = false
}

const handleFinish = async () => {
  spaceFrom.value.spaceId = props.spaceId
  const { data: res } = await addSpaceUserUsingPost(spaceFrom.value)
  if (res.code === 200) {
    message.success('邀请成功')
    closeModal()
  }
}

// 暴露函数给父组件
defineExpose({
  openModal,
})
</script>

<style scoped>
.member-modal {
  max-width: 500px;
}

.member-card {
  padding: 12px;
}

.submit-item {
  margin-bottom: 0;
  text-align: right;
}

:deep(.ant-form-item) {
  margin-bottom: 24px;
}

:deep(.ant-input),
:deep(.ant-select) {
  width: 100%;
}
</style>
